//审核----结算详情

//付费记录页面
import React,{Component} from 'react'
import {Modal,Table, Button} from 'antd'
import Buttons from '../button/button'
import Card from '../card/card'
// import $ from 'jquery'
// import './PayRecord.css'


export default class SettlementDetails extends Component {
    constructor(props){
        super(props);
        this.columns = [{
            title: '角色',
            dataIndex: 'role',
            key: 'role',
            fixed: 'left',
          }, {
            title: '金额',
            dataIndex: 'money',
            key: 'money',
          }, {
            title: '描述',
            dataIndex: 'type',
            key: 'type',
          },{
            title: '收款人',
            dataIndex: 'cash_name',
            key: 'cash_name',
          },{
            title: '收款账号',
            dataIndex: 'cash_card',
            key: 'cash_card',
          }, {
            title: '收款银行',
            dataIndex: 'cash_bank',
            key: 'cash_bank',
        
          },
          {
            dataIndex:'',
            key:'',
            render:()=><Button type="dashed" onClick={this.Playmoney}>未打款</Button>    //type="primary" ==已打款
          }
      ];
        this.state={
            smallvisible:false,
            rightvisible:false
        }
    }

   
    smallhandleCancel=()=>{
      this.setState({
        smallvisible:false
      })
    }
    rightmodal=()=>{
      this.setState({
        smallvisible:true
      })
    }
    cancelmodal=()=>{
      this.setState({
        smallvisible:true
      })
    }
    onOk=(e)=>{
      console.log(1,e.target)
    }

    Playmoney=()=>{
      this.setState({
        rightvisible:true
      })
    }
    rightCancel=()=>{
      this.setState({
        rightvisible:false
      })
    }

    Settledetialcancel=()=>{
      this.props.onCancel();
  }

    render(){
        const cancelbtn={
            float:'right',
            width:'88px',
            height:'30px',
            color:'#fff',
            background: 'red',
            borderRadius: '4px',
            marginRight:'10px'
        }
        const rightbtn={
          float:'right',
          width:'88px',
          height:'30px',
          color:'#fff',
          background: '#4C8EDB',
          borderRadius: '4px',
          marginRight:'10px'
        }
        const closebtn={
          float:'right',
          width:'88px',
          height:'30px',
          color:'#000',
          background: '#fff',
          border:'1px solid #dddddd',
          borderRadius: '4px'
        }
// console.log(this.props)
        return(
            <Modal title="结算记录" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                footer={null}
                onCancel={this.Settledetialcancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}>
                <div className="modal_pay_box">
                            <div>
                                <div className="modal_pay_record">
                                    <div style={{textAlign:'right'}}>{this.props.modaldata?new Date(this.props.modaldata.examine_time * 1000).toLocaleDateString():false}</div>
                                    <Card head="信" item="4" modaldata={this.props.modaldata}></Card>

                                    {/* <div className="card_box">
                                        <div className="card_box_head">
                                            日
                                        </div>
                                        <div className="card_box_content">
                                            <div className="card_content_triangle"></div>
                                            <div>
                                                <Table columns={this.columns} dataSource={this.props.modaldata?this.props.modaldata.allot:false} pagination={false} scroll={{ x: 700 }} >
                                                </Table>
                                            </div>
                                        </div>
                                    </div> */}

                                </div>
                            </div>
                        </div>
                        {this.props.type ==1 ?<div>
                          <Buttons onClick={this.handleCancel} datastyle={closebtn}>关闭</Buttons>          {/*这三个按钮回传数据并且ajax*/}
                          <Buttons onClick={this.rightmodal} datastyle={cancelbtn}>拒绝</Buttons>
                          <Buttons onClick={this.cancelmodal} datastyle={rightbtn}>通过</Buttons>
                        </div>:false}
                        
                <Modal 
                  title="备注"
                  maskClosable={false}
                  onCancel={this.smallhandleCancel}
                  onOk={this.onOk}
                  visible={this.state.smallvisible}
                >
                  <textarea ref="remark" cols='75' rows="5" placeholder="请输入备注，最多250字"  maxLength="250" style={{resize:'none'}}></textarea>
                </Modal>
                <Modal
                visible={this.state.rightvisible}
                maskClosable={false}
                title="提示"
                onCancel={this.rightCancel}>
                    确认打款后，状态无法更改，是否确认？
                </Modal>
            </Modal>
        )
    }
}





